<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <NavigationBar />
    
    <!-- 主内容区 -->
    <main>
      <!-- 路由过渡动画 -->
      <router-view v-slot="{ Component, route }">
        <transition
          :name="route.meta.transition || 'fade'"
          mode="out-in"
        >
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </main>
    
    <!-- 页脚（仅在桌面端显示） -->
    <footer v-if="showFooter" class="hidden lg:block bg-white border-t border-gray-200 mt-auto">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- 关于 -->
          <div>
            <h3 class="text-sm font-semibold text-gray-900 mb-4">关于我们</h3>
            <p class="text-sm text-gray-600">
              AI作文批改系统，智能分析作文，提供专业批改建议。
            </p>
          </div>
          
          <!-- 快速链接 -->
          <div>
            <h3 class="text-sm font-semibold text-gray-900 mb-4">快速链接</h3>
            <ul class="space-y-2">
              <li>
                <router-link to="/" class="text-sm text-gray-600 hover:text-blue-600 transition-colors">
                  首页
                </router-link>
              </li>
              <li>
                <router-link to="/submit" class="text-sm text-gray-600 hover:text-blue-600 transition-colors">
                  提交作文
                </router-link>
              </li>
              <li>
                <router-link to="/history" class="text-sm text-gray-600 hover:text-blue-600 transition-colors">
                  历史记录
                </router-link>
              </li>
            </ul>
          </div>
          
          <!-- 联系方式 -->
          <div>
            <h3 class="text-sm font-semibold text-gray-900 mb-4">联系我们</h3>
            <ul class="space-y-2 text-sm text-gray-600">
              <li>邮箱: support@aiessay.com</li>
              <li>电话: 400-123-4567</li>
              <li>地址: 北京市朝阳区XXX号</li>
            </ul>
          </div>
        </div>
        
        <div class="mt-8 pt-8 border-t border-gray-200 text-center text-sm text-gray-500">
          <p>&copy; 2025 AI作文批改系统. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import NavigationBar from '../components/NavigationBar.vue';

/**
 * MainLayout 组件
 * 应用主布局，包含导航栏和主内容区
 */

// ==================== Composition API ====================
const route = useRoute();

// ==================== Computed ====================

/**
 * 是否显示页脚
 * 某些页面（如登录、注册）不显示页脚
 */
const showFooter = computed(() => {
  const hideFooterRoutes = ['/login', '/register'];
  return !hideFooterRoutes.includes(route.path);
});
</script>

<style scoped>
/* 页面过渡动画 - fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 页面过渡动画 - slide */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 确保布局占满全屏 */
.min-h-screen {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}
</style>

